<template>
    <div>
        <h3>房型显示</h3>
        房型名称:
        <input type="text" v-model="can.houseName">
        <input type="button" value="查询" class="btn btn-info" @click="show">

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>单价</td>
                    <td>室内面积</td>
                    <td>最多入住人数</td>
                    <td>图片</td>
                    <td>房型描述</td>
                    <td>是否有窗</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in query.list">
                    <td>{{item.houseName}}</td>
                    <td>{{item.money}}</td>
                    <td>{{item.mianJi}}</td>
                    <td>{{item.count}}</td>
                    <td>
                        <img :src="item.img" alt="" width="100" height="100">
                    </td>
                    <td>{{item.desc}}</td>
                    <td>{{item.isWindow?"有窗":"无窗"}}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.id)">
                        <input type="button" value="修改" class="btn btn-primary" @click="upd(item.id)">
                    </td> 
                </tr>
            </tbody>
        </table>
        <span>一共<b>{{ query.totalCount }}</b>条</span>
        <span>每页<b>{{  can.pageSize}}</b>条</span>
        <span>共<b>{{ can.pageIndex }}</b>/<b>{{query.totalPage  }}</b>页</span>
      
        <input type="button" value="首页" @click="fenye(1)" class="btn btn-info">
        <input type="button" value="上一页" @click="fenye(can.pageIndex-1)" class="btn btn-info">

        <span v-for="item in query.totalPage" @click="fenye(item)">{{ item }}</span>

        <input type="button" value="下一页" @click="fenye(can.pageIndex+1)" class="btn btn-info">
        <input type="button" value="尾页" @click="fenye(query.totalPage)" class="btn btn-info">
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import {ref,reactive,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
const Route=useRoute();
const Router=useRouter();

onMounted(()=>{
    getlist();
})
const del=(id:any)=>{
    if(confirm("确认删除吗?")){
        axios({
        method:'delete',
        url:'/api/HouseType/DelHouseType',
        params:{
            ids:id,
        },
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert("删除成功");
            getlist();
     
        }
        else{
            alert("删除失败");
            return;
        }       
    })
    .catch(err=>{
        console.log(err);
    })
    }
}
const upd=(id:any)=>{
    router.push({
        path:'/houseTypeUpd',
        query:{
            id:id,
        }
    })
}
const fenye=(num:any)=>{
    if(num<1){
        can.pageIndex=1;
        return;
    }
    if(num>query.totalPage)
    {
        can.pageIndex=query.totalPage;
        return;
    }
    can.pageIndex=num;
    getlist();
}
const show=()=>{
    can.pageIndex=1;
    getlist();
}
const can=reactive({
    pageIndex:1,
    pageSize:2,
    houseName:'',
})
const query:any=reactive({
    totalCount:0,
    totalPage:0,
    list:[],
})
const getlist=()=>{
    axios({
        method:'get',
        url:'/api/HouseType/HouseTypeShows',
        params:can,
    })
    .then(res=>{
        console.log(res);
        query.list=res.data.list
        query.totalCount=res.data.totalCount
        query.totalPage=res.data.totalPage
       
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>    